<template>
  <a-drawer
    title="新增"
    width="27%"
    :visible="userVisible"
    @close="handleCancel"
  >
    <a-form-model
      ref="ruleForm"
      :model="userForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="用户名" prop="username">
        <a-input v-model="userForm.username" allow-clear placeholder="请输入用户名" />
      </a-form-model-item>
      <a-form-model-item label="密码" prop="password">
        <a-input-password v-model="userForm.password" placeholder="请输入密码" />
      </a-form-model-item>
      <a-form-model-item label="姓名" prop="realName">
        <a-input v-model="userForm.realName" allow-clear placeholder="请输入姓名" />
      </a-form-model-item>
      <a-form-model-item label="性别" prop="gender">
        <a-select
          v-model="userForm.gender"
          allow-clear
          placeholder="请选择性别"
        >
          <a-select-option value="1">男</a-select-option>
          <a-select-option value="0">女</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="年龄" prop="age">
        <a-input-number v-model="userForm.age" style="width: 100%;" :min="1" :max="150" :step="1" placeholder="请输入年龄" />
      </a-form-model-item>
      <a-form-model-item label="联系方式" prop="phone">
        <a-input v-model="userForm.phone" allow-clear placeholder="请输入联系方式" />
      </a-form-model-item>
    </a-form-model>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" @click="handleSubmit">
        确认
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  data() {
    return {
      userVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 15 },
      userForm: {
        username: '',
        password: '',
        realName: '',
        gender: '1',
        age: undefined,
        phone: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          {
            pattern: /^[0-9]*$/,
            message: '仅允许输入纯数字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.userForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.userVisible = false
      this.$resetForm('ruleForm', this.userForm)
      this.userForm.gender = '1'
    }
  }
}
</script>
